import React, { Fragment } from 'react';

import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

import { Card, Row, Col, } from 'antd';

export default ({ remark, GoodsPrizes, GoodsFigures }) => {

  return (
    <QueueAnim delay={300}>
      <Card title="详情" bordered={false} bodyStyle={{padding: 16}} key="primary">
        <QueueAnim delay={500} component={Row} gutter={16}>
          {
            Array.isArray(GoodsPrizes) && GoodsPrizes.map((item, key) => 
              <Col span={6} key={key}>
                <Card
                  cover={<img alt="image cover" src={item.cover} />}
                  bodyStyle={{padding: 16}}
                >
                  <h3 className="ellipsis-2" style={{height: 72}}>奖品{key + 1}：{item.title}</h3>
                  <h3 style={{marginBottom: 0}}>奖品数量：<span style={{fontSize: 26}}>{item.number}</span></h3>
                </Card>
              </Col>
            )
          }
        </QueueAnim>
      </Card>

      <OverPack playScale={0.1}>
        <QueueAnim delay={300} component={Card} title="说明" bordered={false} bodyStyle={{padding: 16}} style={{ marginTop: 16, marginBottom: 16 }} key="explain">
          <p key="p1">{remark}</p>
        </QueueAnim>
      </OverPack>

      <Card title="介绍" bordered={false} bodyStyle={{padding: 16}} key="intros">
        <OverPack playScale={0.1}>
          <QueueAnim type={['bottom', 'top']} delay={300} component={Row} gutter={16}>
            {
              Array.isArray(GoodsFigures) && GoodsFigures.map((item, key) => 
                <Col span={6} key={key}>
                  <Card
                    cover={<img alt="explain image" src={item.image} />}
                    bodyStyle={{padding: 16}}
                  >
                    <h3 className="ellipsis-2" style={{height: 72}}>{item.figcaption}</h3>
                  </Card>
                </Col>
              )
            }
          </QueueAnim>
        </OverPack>
      </Card>
    </QueueAnim>
  );

}